<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<div class="hd-20160622">
    <div class="hd-top-area">
      <div class="top-baaner">
        <p class="top-wesite">Entrar en <a href="#">Geekvida.es >></a></p>
          <div class="swiper-container">
            <ul class="swiper-wrapper">
              <li class="swiper-slide" style="background: url(./images/201606222.jpg) 50% 0% no-repeat #000;">
                <a href="#" class="second-button img-button">Comprar >></a>
              </li>
              <li class="swiper-slide" style="background: url(./images/201606221.jpg) 50% 0% no-repeat #000;">
                <a href="#" class="first-button img-button">Comprar >></a>
              </li>
            </ul>
            <span class="swiper-button-next"></span>
            <span class="swiper-button-prev"></span>
            <div class="swiper-pagination">
            </div>
          </div>
      </div>
    </div>
    
    <div class="hd-product-list w1058">
      <div class="display">
        <a href="#" class="hd-button">Video de reseña(S3)</a>
        <a href="#" class="hd-button">Video de reseña(P9000)</a>
        <div class="hd-product-list">
          <ul class="display-list1 lists-4 clearfloat"></ul>
        </div>
      </div>
    </div>
    
  </div>
<style>
  .hd-20160622 {background: #ebecee;margin-top:-13px;}
  .top-wesite { position: absolute; background: #fff; top: 0px; right: 100px; z-index: 999; padding: 5px 10px; border: 1px solid #dedede; font-size: 15px; line-height: 25px;}
  .top-wesite a {color: #05920A;}
  .swiper-wrapper {height:700px;}
  .swiper-wrapper li .img-button {font-size: 24px;position: absolute;bottom: 50px;left: 50%;margin-left: -522px;}
  .swiper-wrapper li .first-button {color: #fff; background: #292828; padding: 10px 15px 14px; border-bottom: 2px solid #191818; border-radius: 5px;}
  .swiper-wrapper li .second-button {color:#FF8E0D;background:#FCDD2D;border-bottom:2px solid #F19A00;border-radius: 5px;padding: 5px 15px;}
  .hd-product-list .display {text-align: center;}
  .display-list1 li {overflow: hidden;float: left;text-align: center;width:257px;margin: 0 10px 10px 0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;position: relative;background: #fff;}
  .display-list1 li:hover {border-color:#DCD2D2; transform: translateY(-6px); -webkit-transform: translateY(-6px); -o-transform: translateY(-6px); -ms-transform: translateY(-6px); -moz-transform: translateY(-6px);box-shadow: 0px 0px 16px #b5b3b3;-webkit-box-shadow: 0px 0px 16px #b5b3b3;-o-box-shadow: 0px 0px 16px #b5b3b3;-ms-box-shadow: 0px 0px 16px #b5b3b3;-moz-box-shadow: 0px 0px 16px #b5b3b3;}
   .display-list1 li .hd-btn-buy {font-size: 18px;color: #fff;background: #ee2456;position: absolute;bottom: 65px;left: 300px;padding: 5px 10px;border-radius: 5px;}
  .display .hd-button {background: #eb0028;color: #fff;padding: 10px 15px;font-size: 18px;border-bottom: 2px solid #660011;border-right: 2px solid #660011;border-top: 2px solid #f68fa1;border-left: 2px solid #f68fa1;margin: 20px 128px;display: inline-block;}
   .hd-product-list {padding-bottom: 30px;}
   .hd-product-list .product-info .price-area {position: absolute; bottom: 33px; right: 37px;}
  .hd-product-list .product-info {padding: 0px 5px;height:90px;background: rgba(0, 0, 0, 0.8);position: absolute;bottom: -90px;width: 100%;-webkit-transition: all 0.3s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
  .display-list1 li:hover .product-info {bottom: 0px;}
  .display-list1 li:nth-child(4n+4) {margin-right: 0px;}
  .display-list1 .info { font-size: 15px; color: #fff; line-height: 20px; margin: 0px; text-align: left; width: 57%; padding: 5px;}
  .display-list1 .old-price {font-size: 15px;text-decoration: line-through;text-align: left;margin: 0px;color:#fff;}
  .display-list1 .new-price {font-size: 28px;text-align: left;margin: 0px;color:#ce0628;line-height: 28px;}
   .display-list1 .new-price .small {font-size: 16px;font-weight: lighter;}
   .hd-product-list .product-info .btn-action {position: absolute; right: 20px; border: 1px solid #ce0628; padding: 0px 5px 3px; bottom: 5px;}
   .product-info .btn-action .btn-buy { font-size: 14px; color: #ce0628;}
   .hd-product-list .product-info .btn-action:hover {background:#ce0628;}
   .hd-product-list .product-info .btn-action:hover a {color:#fff;}
   .display-list1 li a {display: block;}
   .display-list1 li .product-img {display: block;margin-top:10px;width:100%;}
   .swiper-container-horizontal>.swiper-pagination-bullets {background: rgba(255, 255, 255, 0.8); width: auto; left: 50%; border-radius: 10px; padding: 2px 5px;}
   .swiper-pagination-bullet {width:12px;height: 12px;}
</style>
 
  <script type="text/javascript">
    (function($){
         
     var str1 = '', pageSwiper = '',tempIndex = '';
      for (var i = 0; i < 4; i++) {
        str1 += `<li>
          <a href="#"><img class="product-img" src="./images/2016040616.jpg"  alt="Elephone P9000 4GB 32GB Blanco"></a>
          <div class="product-info">
            <p class="info">Elephone P9000 4GB 32GB Blanco</p>
            <div class="price-area">
              <p class="old-price">249.99€</p>
              <p class="new-price">229<span class="small">.99€</span></p>
            </div>
            <div class="btn-action">
              <a class="btn-buy" href="#">Comprar&nbsp;&gt;&gt;</a>
            </div>
          </div>
        </li>`;
      } 
      $(".lists-4").append(str1);
     
      tempIndex =  setInterval(function(){/*不加这个函数的话, 执行到new Swiper的时候, Swiper的js还没有引进来会报错*/
            if(Swiper){
              pageSwiper = new Swiper ('.swiper-container', {
                loop: true,
                autoplay:true,
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true
                },
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }
              });

              console.log($(".swiper-pagination").width());
              $(".swiper-pagination").css({"margin-left":-($(".swiper-pagination").width() + 10)/2 + "px"});
              clearInterval(tempIndex);
            }
          }, 1000);  

    })(jQuery);
  </script>